<template>
  <div class="dashboard-container">
    <div class="count">
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">
          <div class="right">
            <div class="money">交易金额</div>
            <div class="money">20000.00</div>
          </div>
        </div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <div class="right">
            <div class="money">总收益</div>
            <div class="money">20000.00</div>
          </div>
        </div></el-col>
      </el-row>
    </div>

    <div>
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;font-weight:normal;">
          <el-form :inline="true" :model="filters" :size="size">
            <el-form-item>
              <el-input v-model="filters.hospitalName" placeholder="医院名称"></el-input>
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')"type="primary" @click="findPage(null)"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
          <el-form :inline="true" :size="size">
            <el-form-item>
              <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPage(null)">刷新</el-button>
              </el-tooltip>
              <el-tooltip content="列显示" placement="top">
                <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog">列显示</el-button>
              </el-tooltip>
              </el-button-group>
            </el-form-item>
          </el-form>
          <!--表格显示列界面-->
          <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
            @handleFilterColumns="handleFilterColumns"> 
          </table-column-filter-dialog>
        </div>
        <!--表格内容栏-->
        <kt-table :height="350" :data="pageResult" :columns="filterColumns" @findPage="findPage"></kt-table>
    
    </div>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
export default {
  components:{
      PopupTreeInput,
      KtTable,
      KtButton,
      TableColumnFilterDialog
	},
  data() {
    return {
      size: 'small',
			filters: {
				hospitalName: null
			},
			columns: [],
			filterColumns: [],
		  pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {"pageNum":1,"pageSize":10,"totalSize":0,"totalPages":0,"content":[]},
      img_url_1:require("../../assets/1.jpg")
    }
  },
  methods:{
    // 获取分页数据
		findPage: function (data) {
			var me = this;
			if(data !== null && data !== undefined) {
				me.pageRequest = data
			}
			console.log(me.pageRequest);
			let req = {
				"pageNumber":me.pageRequest.pageNum,
				"pageSize":me.pageRequest.pageSize,
				"hospitalName":me.filters.hospitalName
			}
			this.$api.finance.findPage(req).then((res) => {
				debugger;
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					me.pageResult.pageNum = res.page.pageNumber;
					me.pageResult.pageSize = res.page.pageSize;
					me.pageResult.totalSize = res.page.totalCount;
					me.pageResult.totalPages = res.page.totalPage;
					me.pageResult.content = res.page.list;
					console.log(me.pageResult)
				}
			}).then(data!=null?data.callback:'')
		},
  // 时间格式化
    dateFormat: function (row, column, cellValue, index){
      return format(row[column.property])
    },
  // 处理表格列过滤显示
    displayFilterColumnsDialog: function () {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true)
    },
  // 处理表格列过滤显示
    handleFilterColumns: function (data) {
      this.filterColumns = data.filterColumns
      this.$refs.tableColumnFilterDialog.setDialogVisible(false)
    },
  // 处理表格列过滤显示
    initColumns: function () {
      this.columns = [
        {prop:"hospitalName", label:"医院名称", minWidth:120},
        {prop:"hospitalPrincipal", label:"联系人", minWidth:120},
        {prop:"contactInformationfa", label:"手机号", minWidth:100},
        {prop:"cumulativeIncome", label:"累计收益", minWidth:70},
      ]
      this.filterColumns = JSON.parse(JSON.stringify(this.columns));
    },
    setType(){
			this.GLOBAL.setType('8');
		}
  },
  created(){
		this.setType();
	},
   mounted() {
    this.initColumns()
		this.findPage()
	}
}
</script>

<style lang="scss" scoped>
  .dashboard-container {
    width: 100%;
    min-width: 1024px;
    margin:20px auto;
    .count{
      width:100%;
      height:100px;
      min-width: 600px;

      }
      .el-row {
        &:last-child {
          margin-bottom: 0;
        }
      .grid-content {
        height:70px;
      }
      .right{
        width:160px;
        height:60px;
        float:right;
        font-size:12px;
        border:1px solid black;
      }
      .money{
        padding-left:30%;
        line-height:30px;
        font-weight:bold;
      }
      
    }
  }
  
  
</style>
